<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-form ref="form1" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name" ></el-input>
          <el-button @click="yanz">点我得到验证码</el-button>  
        </el-form-item>
        <el-button @click="submit">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data () {
    return {
      form: {
        name: '',
        pad: ''
      },
      rules:{
        name:[
          {required:true,message:'不能为空',trigger:'blur'},
          {
            validator:(rule,value,callback)=>{
              const reg=/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              reg.test(value)?callback():callback(new Error('手机号不合法'))
            },trigger:'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  methods:{
    submit(){
      this.$refs.form1.validate(result=> {
        if(result){
          console.log('验证成功');
        }else{
          console.log('验证失败');
        }
      })
    },
    yanz(){
      this.$refs.form1.validateField(['name'],errorMsg=>{
        // if(errorMsg){
        //   console.log('验证不通过');
        // }else{
        //   console.log('验证通过');
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
